<template>
  <div id="Login">
    <div class="main">
      <img src alt>
      <div class="Language">
        <button class="zh" :class="{'active':languageToggle}" @click="languageToggle = true">中文</button>
        <button
          class="en"
          :class="{'active':!languageToggle}"
          @click="languageToggle = false"
        >English</button>
      </div>
      <div class="loginBox">
        <div class="phoneNum">
          <input
            type="number"
            placeholder="输入学员手机"
            :class="{'focus':focusPN}"
            @focus="focusPN = true"
            @blur="focusPN = false"
          >
          <span class="icon" :class="{'focusActive':focusPN}"></span>
        </div>
        <div class="pwd">
          <input
            type="password"
            placeholder="输入登录密码"
            :class="{'focus':focusPW}"
            @focus="focusPW = true"
            @blur="focusPW = false"
          >
          <span class="icon" :class="{'focusActive':focusPW}"></span>
        </div>
        <div class="check">
          <!-- <input type="checkbox" value="check" id="check"> -->
          <div class="checkBox" :class="{'checkBoxActive':check}" @click="check = !check"></div>
          <label class="rememberm" for="check">记住账号密码</label>
        </div>
        <button class="confirm" :class="{'confirmActive':confirmToggle}" @click="gotoIndex">确定登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      check: false,
      phoneNum: "",
      pwd: "",
      languageToggle: true,
      focusPN: false,
      focusPW: false,
      confirmToggle: false
    };
  },
  methods: {
    gotoIndex() {
      window.sessionStorage.setItem("token", "token1111");
      this.$router.push({ path: "/", component: "Home" });
    },
    rememberPW(){
      if(this.check){

      }
    }
  }
};
</script>

<style lang="scss" scoped>
#Login {
  height: 100%;
  width: 100%;
  background: url("../../assets/img/indexBg.jpg") no-repeat center;
  background-size: 100% 100%;
  // position: relative;
  .main {
    width: 3.6rem;
    height: auto;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding-top: 0.53rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border: 0.05rem solid #ffffff;
      border-radius: 50%;
      margin: 0 auto 0.3rem;
      display: block;
    }
    .Language {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 3.6rem;
      button {
        width: 1.2rem;
        height: 0.5rem;
        border: 5px solid #74d5f1;
        border-radius: 0.25rem;
        background: linear-gradient(#00efff, #00aaff);
        color: #ffffff;
        font-size: 0.24rem;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        border: 5px solid #ffffff;
        background: linear-gradient(#f9ec4f, #ff7200);
      }
    }
    .loginBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .phoneNum,
      .pwd {
        position: relative;
        margin-top: 0.21rem;
        font-size: 0.18rem;
        input {
          width: 2.85rem;
          height: 0.32rem;
          border: 0.05rem solid #cff5ff;
          border-radius: 0.32rem;
          padding: 0.06rem 0 0.06rem 0.53rem;
          font-size: 0.18rem;
          background: none;
          -webkit-appearance: none;
        }
        input::-webkit-input-placeholder,
        input::-moz-placeholder,
        input:-ms-input-placeholder,
        input:-moz-placeholder {
          color: #888888;
          font-size: 0.18rem;
        }
        .icon {
          position: absolute;
          top: 0.11rem;
          left: 0.11rem;
          display: block;
          width: 0.32rem;
          height: 0.32rem;
          background: linear-gradient(#5df8fd, #056ece);
          border-radius: 50%;
        }
        .icon::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9;
          width: 0.32rem;
          height: 0.32rem;
          background: url("../../assets/icon/loginIcon.png") no-repeat 0.08rem
            0.05rem;
        }
        .focus {
          box-shadow: 0px 0px 1px 3px #ffb869 inset;
        }
        .focusActive {
          background: linear-gradient(#ffc900, #ff6b00);
        }
      }
      .pwd {
        .icon::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9;
          width: 0.32rem;
          height: 0.32rem;
          background: url("../../assets/icon/loginIcon.png") no-repeat -0.225rem
            0.05rem;
        }
      }
      .check {
        margin-top: 0.2rem;
        width: 3.3rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .checkBox {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          width: 0.24rem;
          height: 0.24rem;
          border: 0.03rem solid #ffffff;
          border-radius: 0.1rem;
          background: #9ee9ff;
          vertical-align: middle;
          margin-right: 0.14rem;
          cursor: pointer;
        }
        .checkBoxActive::after{
          content: "";
          position: absolute;
          top: .05rem;
          left:.05rem;
          width: 50%;
          height: 30%;
          border: 0.03rem solid #ffffff;
          border-top: none;
          border-right: none;
          background: transparent;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
        .rememberm {
          font-size: 0.16rem;
          color: #4a4a4a;
        }
      }
      .confirm {
        margin-top: 0.18rem;
        width: 3.48rem;
        height: 0.55rem;
        border: 0.05rem solid #cff5ff;
        border-radius: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.22rem;
        color: #ffffff;
        background: linear-gradient(#7cfaff, #006bce);
      }
      .confirm:active {
        background: linear-gradient(#ffc900, #ff6b00);
      }
    }
  }
}
</style>

